<template>
    <div>
        <AddClipSingleHz />
        <AddClipMultiHz />
        <AddSourceClipHz />
        <JustClipHz />
        <FissionClipHz />
        <FissionRecordClip />
        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="sch_tab" @click="switchTab('/scripthzlist')">脚本</div>
                    <div class="sch_tab" @click="switchTab('/shothzlist')">拍摄</div>
                    <div class="sch_tab active">剪辑</div>
                </div>
                <div class="flexbox flexcenter">
                    <el-radio-group v-model="queryInfo.is_all" @change="getDataList(1)" size="small">
                        <el-radio-button :label="0">按周选</el-radio-button>
                        <el-radio-button :label="1">全部日期</el-radio-button>
                    </el-radio-group>
                    <el-date-picker size="small" v-if="queryInfo.is_all==0" v-model="yearData" @change="getData()" style="width:220px;margin-left:10px" :clearable='false' type="week" format="yyyy 年 MM 月 第 WW 周" placeholder="选择周">
                    </el-date-picker>
                    <el-button plain size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addClipMultiHz">多需求</el-button>
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addClipSingleHz">单需求</el-button>
                </div>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box">
                                <img src="../../assets/img/saixuan.svg" alt="">
                                <span class="drop_title">{{queryInfo.onlyme==0?'全部':'分配给我的'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-radio-group v-model="queryInfo.onlyme" @change="getDataList(1)" class="check_style">
                                    <el-radio :label="1">
                                        <span class="el_check_title">分配给我的</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                    <el-radio :label="0">
                                        <span class="el_check_title">全部</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                    <div class="flexbox flexcenter">
                        <el-select v-model="queryInfo.field" placeholder="请选择" size="small" style="width:110px" class="cust_select">
                            <el-option  label="截至日期" value="closing_date"></el-option>
                            <el-option  label="按ID" value="id"></el-option>
                        </el-select>
                        <div class="icon_btn icon_btn_32" @click="sortFun('desc')" v-if="queryInfo.order==''|| queryInfo.order=='asc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                        <div class="icon_btn icon_btn_32 rote_180" @click="sortFun('asc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter max_width">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">其余拍摄人</span>
                            <span class="drop_title">{{executor_text.length>0?executor_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="executorQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':executor_text.length>0}">已选 {{executor_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('executor_text','executor_uid')" v-if="executor_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.executor_uid" class="check_style" @change="selectText(photoList,queryInfo.executor_uid,'executor_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData(executorQuery,photoList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">编导</span>
                            <span class="drop_title">{{director_text.length>0?director_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="directorQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':director_text.length>0}">已选 {{director_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('director_text','director_uid')" v-if="director_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.director_uid" class="check_style" @change="selectText(directorList,queryInfo.director_uid,'director_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData(directorQuery,directorList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">剪辑</span>
                            <span class="drop_title">{{editor_text.length>0?editor_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="editorQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':editor_text.length>0}">已选 {{editor_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('editor_text','editor_uid')" v-if="editor_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.editor_uid" class="check_style" @change="selectText(editorList,queryInfo.editor_uid,'editor_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData(editorQuery,editorList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">截止日期</span>
                            <span class="drop_title">{{data_text.length>0?data_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':data_text.length>0}">已选 {{data_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('data_text','closing_date')" v-if="data_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.closing_date" class="check_style" @change="selectText(dataList,queryInfo.closing_date,'data_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData('',dataList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">裂变类型</span>
                            <span class="drop_title">{{fission_text.length>0?fission_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':fission_text.length>0}">已选 {{fission_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('fission_text','fission_type')" v-if="fission_text.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="queryInfo.fission_type" class="check_style" @change="selectText(fissionList,queryInfo.fission_type,'fission_text','nickname')">
                                <el-checkbox :label="item.id" v-for="item in filteredData('',fissionList,'nickname')" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">品牌</span>
                            <span class="drop_title">{{queryInfo.brand_name?queryInfo.brand_name:'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="queryInfo.brand_name" @change="getDataList(1)" clearable placeholder="请输入品牌名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">产品</span>
                            <span class="drop_title">{{queryInfo.product_name?queryInfo.product_name:'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-input v-model="queryInfo.product_name" @change="getDataList(1)" clearable placeholder="请输入产品名称" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <template v-if="addrank[0].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(0)"></span>
                                <span class="drop_text">业务场景</span>
                                <span class="drop_title">{{business_text.length>0?business_text.toString():'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':business_text.length>0}">已选 {{business_text.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearFilter('business_text','business_scene')" v-if="business_text.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.business_scene" class="check_style" @change="selectText(businessList,queryInfo.business_scene,'business_text','nickname')">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',businessList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[1].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(1)"></span>
                                <span class="drop_text">审核状态</span>
                                <span class="drop_title">{{verify_text.length>0?verify_text.toString():'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':verify_text.length>0}">已选 {{verify_text.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearFilter('verify_text','verify_status')" v-if="verify_text.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.verify_status" class="check_style" @change="selectText(verifyList,queryInfo.verify_status,'verify_text','nickname')">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',verifyList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <template v-if="addrank[2].check">
                        <div class="rank_line"></div>
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="close_drop el-icon-error" @click.stop="deletRank(2)"></span>
                                <span class="drop_text">平台</span>
                                <span class="drop_title">{{channel_text.length>0?channel_text.toString():'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':channel_text.length>0}">已选 {{channel_text.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearFilter('channel_text','channel')" v-if="channel_text.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.channel" class="check_style" @change="selectText(channelList,queryInfo.channel,'channel_text','nickname')">
                                    <el-checkbox :label="item.id" v-for="item in filteredData('',channelList,'nickname')" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>

                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">+ 筛选</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <ul class="demand_rank">
                                <li v-for="(item,index) in addrank" :key="index">
                                    <el-checkbox v-model="item.check" @change="changeRank(item.check,index)">{{item.name}}</el-checkbox>
                                </li>
                            </ul>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <template v-if="queryInfo.id.length>0">
                        <div class="rank_line"></div>
                        <el-tag type="info" size="small" closable @close="tagClose()">
                            原需求：{{queryInfo.id.toString()}}
                        </el-tag>
                    </template>

                </div>
                <div class="input_width">
                    <el-input style="width:216px;margin-left:5px" clearable size="small" placeholder="素材名称" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                    </el-input>
                </div>
            </div>
        </div>
        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <div class="flexbox flexbetween flexcenter" style="margin-bottom:16px">
                    <span class="font_16 color_01">需求列表</span>
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_01" style="margin-right:10px">已完成</span>
                        <el-progress :percentage="process" style="width:120px"></el-progress>
                    </div>
                </div>
                <el-table :data="tableData" class="com_table" max-height="700px">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="id" label="ID" min-width="120">
                    </el-table-column>
                    <el-table-column prop="" label="品牌/产品" width="130">
                        <template slot-scope="scope">
                            <div class="table_brand">{{scope.row.brand_name}}</div>
                            <div class="table_product">{{scope.row.product_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="full_name" label="脚本信息" width="100">
                        <template slot-scope="scope">
                            <a class="icon_btn icon_btn_32 flexbox flexcenter" v-if="scope.row.script_material" :underline="false" :href="scope.row.script_material" target="_blank"><img src="../../assets/img/file_icon.svg" alt=""></a>
                            <div class="icon_btn icon_btn_32 flexbox flexcenter" v-else :underline="false"><img src="../../assets/img/file_icon2.svg" alt=""></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="script_name" label="脚本名称" width="100">
                        <template slot-scope="scope">
                            {{scope.row.script_name?scope.row.script_name:'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="full_name" label="剪辑素材" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <el-popover placement="left" title="" v-if="scope.row.material" width="280" trigger="hover" content="" @show='showVideo(scope.row.material)' @hide='hideVideo'>
                                    <div style="width:100%;height:500px">
                                        <video v-if="video_status" id="media" :src="vd_url" muted autoplay preload controls width="100%" height="100%"></video>
                                    </div>
                                    <router-link class="add_sche flexbox flexcenter" target="_blank" :to="{path:'/schedetailshz',query:{id:scope.row.id}}" slot="reference"><img :src="scope.row.material+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" style="width:32px;height:32px"></router-link>
                                </el-popover>
                                <div class="add_sche flexbox flexcenter" @click="addSourceClipHz(scope.row.id)" v-if="scope.row.sync_status!=1"><img src="../../assets/img/add_sch.svg" alt=""></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fission_type" label="裂变类型" width="100">
                        <template slot-scope="scope">
                            <el-link v-if="scope.row.fission_type==1" @click="fissionRecordClip(scope.row)">修改</el-link>
                            <el-link v-else-if="scope.row.fission_type==2" @click="fissionRecordClip(scope.row)">调整</el-link>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="business_scene" label="业务场景" width="170">
                        <template slot-scope="scope">
                            <SceneModel :sceneTyle="scope.row" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="closing_date" label="截止日期" width="130">
                        <template slot-scope="scope">
                            <DaysModel :daysTyle="scope.row" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="verify_status" label="审核状态" width="100">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter" v-if="scope.row.verify_status==0">
                                <span class="text_gray">暂无</span>
                            </div>
                            <template v-else>
                                <el-popover placement="top" trigger="hover">
                                    <div class="tips_content" v-html="scope.row.reject_reason">

                                    </div>
                                    <div class="flexbox flexcenter" slot="reference">
                                        <span class="text_red" style="margin-right:5px">卡审</span>
                                        <img src="../../assets/img/reson_icon.svg" alt="">
                                    </div>
                                </el-popover>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="executor" label="其余拍摄人" width="130" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.executor.map(val=>{return val.nickname}).toString()}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="director_name" label="编导" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="editor_name" label="剪辑" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="photographer_name" label="拍摄" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="material_name" label="素材名称" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope" slot="header">
                            <div class="flexbox flexcenter">
                                素材名称
                                <el-tooltip content="HZ_品牌名_产品名_编导_拍摄_剪辑_脚本ID_唯一码_日期" placement="top">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px">
                                        <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                                        <path d="M7.4 8.8544V8.9544H7.5H8.74454H8.84454V8.8544C8.84454 8.40304 8.93037 8.06505 9.09807 7.83666L9.09814 7.83671L9.10039 7.83337C9.28308 7.56236 9.58383 7.42692 10.0437 7.42692C10.3968 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1227 8.15083 11.1227 8.49176C11.1227 8.7406 11.0343 8.98223 10.8511 9.20803L10.7251 9.3559C10.3714 9.67381 10.0866 9.94944 9.87171 10.1838C9.65777 10.4171 9.50782 10.6151 9.43008 10.7769C9.26797 11.0923 9.20131 11.4719 9.20131 11.8984V12.0522V12.1522H9.30131H10.5568H10.6568V12.0522V11.8984C10.6568 11.6496 10.708 11.4341 10.8101 11.2286C10.9023 11.043 11.0356 10.8671 11.2215 10.7112L11.2215 10.7113L11.2233 10.7097C11.746 10.2493 12.0676 9.9484 12.1706 9.83314L12.1709 9.8334L12.1763 9.82623C12.4532 9.4545 12.6 8.98201 12.6 8.41484C12.6 7.72088 12.3729 7.16437 11.9116 6.75784C11.452 6.34177 10.8473 6.15 10.1201 6.15C9.29233 6.15 8.63194 6.38707 8.13991 6.8706C7.63532 7.35566 7.4 8.02186 7.4 8.8544ZM10.584 13.1633L10.5841 13.1632L10.5816 13.1609C10.3975 12.9879 10.1648 12.903 9.90175 12.903C9.63738 12.903 9.41603 12.9888 9.23284 13.1609C9.04613 13.3363 8.96114 13.5619 8.96114 13.8271C8.96114 14.0924 9.04613 14.318 9.23284 14.4934C9.41353 14.6632 9.634 14.7623 9.90175 14.7623C10.1661 14.7623 10.3875 14.6765 10.5707 14.5044C10.756 14.3303 10.8533 14.0945 10.8533 13.8271C10.8533 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                                    </svg>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="" @blur="editRemark(scope.row,scope.$index)" v-focus size="mini" v-if="scope.row.remarkshow"></el-input>
                            <div class="flexbox flexcenter remark_hover" v-else>{{scope.row.remark?scope.row.remark:'--'}}<span class="icon_btn flexbox flexcenter flexjust" v-if="scope.row.sync_status!=1"><img src="../../assets/img/edit_icon2.svg" alt="" @click="showRemark(scope.$index)"></span></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_num" label="操作" width="190" align="center" fixed="right">
                        <template slot-scope="scope">
                            <template v-if="scope.row.status==1">
                                <el-button type="text" style="padding:0" @click="justClipHz(scope.row)" :disabled="scope.row.sync_status==1">编辑</el-button>
                                <el-button type="text" style="padding:0" @click="syncMaterial(scope.row)" :disabled="!scope.row.material || scope.row.sync_status==1">同步素材库</el-button>
                                <el-dropdown style="margin-left:5px">
                                    <el-button type="text" style="padding:0" icon="el-icon-more" class="role_icon"></el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="fissionClipHz(scope.row)" :disabled='scope.row.fission_type !=0'>
                                            <div class="flexbox flexcenter">
                                                <img src="../../assets/img/split_icon.svg" alt="">
                                                <span class="font_14 color_01" style="margin-left:5px">裂变</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native="deletClipHz(scope.row)" v-if="!scope.row.material">
                                            <div class="flexbox flexcenter">
                                                <img src="../../assets/img/del_icon.svg" alt="">
                                                <span class="font_14 color_01" style="margin-left:5px">废弃</span>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                            <template v-else-if="scope.row.status==-1">
                                <el-button type="text" disabled>已作废</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {
    dataList,
    businessList,
    verifyList,
    channelList,
    fissionList,
} from "../../assets/js/scheduling";
import AddClipSingleHz from "./AddClipSingleHz";
import AddClipMultiHz from "./AddClipMultiHz";
import AddSourceClipHz from "./AddSourceClipHz";
import JustClipHz from "./JustClipHz";
import FissionClipHz from "./FissionClipHz";
import FissionRecordClip from "./FissionRecordClip";
import SceneModel from "./SceneModel";
import DaysModel from "./DaysModel";
export default {
    name: "",
    data() {
        return {
            process: 0,
            queryInfo: {
                year: "",
                week: "",
                page: 1,
                limit: 20,
                query: "",
                director_uid: [],
                closing_date: [],
                channel: [],
                brand_name: "",
                product_name: "",
                editor_uid: [],
                onlyme: 0,
                field: "closing_date",
                order: "",
                executor_uid: [],
                verify_status: [],
                fission_type: [],
                business_scene: [],
                id: [],
                is_all: 0,
            },
            loading: false,
            vd_url: "",
            video_status: false,
            yearData: new Date(),
            optimiList: "", //优化师列表
            photoList: [], //拍摄列表
            directorList: [], //编导列表
            editorList: [], //剪辑列表
            dataList: [], //日期列表
            fissionList: [],
            businessList: [],
            verifyList: [],
            channelList: [],
            executorQuery: "", //执行人搜索
            directorQuery: "", //编导搜索
            editorQuery: "", //剪辑搜索
            executor_text: [], //已选执行人
            director_text: [], //已选编导
            editor_text: [], //已选剪辑
            data_text: [], //已选剪辑
            fission_text: [], //已选裂变类型
            business_text: [], //已选业务场景
            verify_text: [], //已选审核状态
            channel_text: [], //已选平台
            tabindex: 1,
            showrank: true,
            addrank: [
                {
                    check: false,
                    name: "业务场景",
                },
                {
                    check: false,
                    name: "审核状态",
                },
                {
                    check: false,
                    name: "平台",
                },
            ], // 添加筛选
            currActive: 1,
            total: 1,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.dataList = dataList;
        this.businessList = businessList;
        this.verifyList = verifyList;
        this.channelList = channelList;
        this.fissionList = fissionList;
        let dayTime = this.$route.query.day
            ? JSON.parse(this.$route.query.day)
            : "";
        this.yearData = dayTime ? new Date(dayTime) : new Date();
        this.queryInfo.week = dayTime
            ? this.getYearWeek(new Date(dayTime))
            : this.getYearWeek(new Date());
        this.queryInfo.year = dayTime
            ? this.dateFormat("YYYY", new Date(dayTime))
            : this.dateFormat("YYYY", new Date());
        let aobj = JSON.parse(window.sessionStorage.getItem("schedulingClip"));
        if (aobj) {
            this.queryInfo.year = aobj.year;
            this.queryInfo.week = aobj.week;
            this.queryInfo.page = aobj.page;
            this.yearData = aobj.yearData;
        }
        this.getDataList(this.queryInfo.page);
        this.getPhotographerList();
        this.getDirectorList();
        this.getEditorList();
        // this.getOptimization();
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("schedulingClip");
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/clipList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                for (let i in res.data.list) {
                    res.data.list[i].remarkshow = false;
                }
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.process = res.data.process;
            }
        },

        // 筛选
        filteredData(query, list, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item[name].indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        // 获取优化师列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/userList",
                {
                    department: 0,
                    page: 1,
                    limit: 0,
                    function: 0,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data.list;
            }
        },

        // 获取拍摄列表
        async getPhotographerList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzPhotographerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.photoList = res.data;
            }
        },

        // 获取编导列表
        async getDirectorList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzDirectorList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.directorList = res.data;
            }
        },

        // 获取剪辑列表
        async getEditorList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzEditorList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.editorList = res.data;
            }
        },

        // 视频播放
        showVideo(url) {
            this.vd_url = url;
            this.video_status = true;
        },
        // 视频停止
        hideVideo() {
            this.vd_url = "";
            this.video_status = false;
        },

        getData() {
            this.queryInfo.week = this.getYearWeek(new Date(this.yearData));
            this.queryInfo.year = this.dateFormat(
                "YYYY",
                new Date(this.yearData)
            );
            this.getDataList(1);
            this.setSessionStorage();
        },

        getYearWeek(date) {
            date = this.dateFormat("YYYY-mm-dd", date); //将日期转换成yyyy-mm-dd格式
            date = new Date(date);
            let d = "";
            var date2 = new Date(date.getFullYear(), 0, 1);
            var day1 = date.getDay();
            if (day1 == 0) day1 = 7;
            var day2 = date2.getDay();
            if (day2 == 0) day2 = 7;
            d = Math.round(
                (date.getTime() -
                    date2.getTime() +
                    (day2 - day1) * (24 * 60 * 60 * 1000)) /
                    86400000
            );
            return Math.ceil(d / 7);
        },

        // 日期格式化
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString(), // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1
                            ? opt[k]
                            : opt[k].padStart(ret[1].length, "0")
                    );
                }
            }
            return fmt;
        },

        // 筛选
        selectText(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                id.forEach((val) => {
                    if (element.id == val) {
                        has_checked.push(element[name]);
                    }
                });
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 清除已选
        clearFilter(text, id) {
            this.queryInfo[id] = [];
            this[text] = [];
            this.getDataList(1);
        },

        // 创建单需求
        addClipSingleHz() {
            const attr = {
                dialogVsb: true,
                week: this.queryInfo.week,
                year: this.queryInfo.year,
            };
            this.$bus.emit("addClipSingleHz", attr);
        },

        // 创建多需求
        addClipMultiHz() {
            const attr = {
                dialogVsb: true,
                week: this.queryInfo.week,
                year: this.queryInfo.year,
            };
            this.$bus.emit("addClipMultiHz", attr);
        },

        // 添加素材
        addSourceClipHz(id) {
            const attr = {
                id: id,
                dialogVsb: true,
            };
            this.$bus.emit("addSourceClipHz", attr);
        },

        // 调整
        justClipHz(row) {
            let executor_uid = row.executor.map((val) => {
                return val.id;
            });
            const attr = {
                week: this.queryInfo.week,
                year: this.queryInfo.year,
                brand_name: row.brand_name,
                product_name: row.product_name,
                business_scene: row.business_scene,
                executor_uid: executor_uid,
                script_id: row.script_id,
                editor_uid: row.editor_uid,
                closing_date: row.closing_date,
                photographer_uid: row.photographer_uid,
                material_finish: row.material_finish,
                id: row.id,
                dialogVsb: true,
            };
            this.$bus.emit("justClipHz", attr);
        },

        // 裂变
        fissionClipHz(row) {
            const attr = {
                brand_name: row.brand_name,
                product_name: row.product_name,
                director_name: row.director_name,
                executor: row.executor,
                id: row.id,
                dialogVsb: true,
            };
            this.$bus.emit("fissionClipHz", attr);
        },

        // 裂变记录
        fissionRecordClip(row) {
            const attr = {
                fission_type: row.fission_type,
                id: row.id,
                dialogVsb: true,
            };
            this.$bus.emit("fissionRecordClip", attr);
        },

        // 删除筛选
        deletRank(index) {
            this.addrank[index].check = false;
            if (index == 0) {
                this.business_text = [];
                this.queryInfo.business_scene = [];
            } else if (index == 1) {
                this.verify_text = [];
                this.queryInfo.verify_status = [];
            } else if (index == 2) {
                this.channel_text = [];
                this.queryInfo.channel = [];
            }
            this.getDataList(1);
        },
        changeRank(val, index) {
            if (!val) {
                if (index == 0) {
                    this.business_text = [];
                    this.queryInfo.business_scene = [];
                } else if (index == 1) {
                    this.verify_text = [];
                    this.queryInfo.verify_status = [];
                } else if (index == 2) {
                    this.channel_text = [];
                    this.queryInfo.channel = [];
                }
                this.getDataList(1);
            }
        },

        // 备注
        showRemark(index) {
            this.tableData[index].remarkshow = true;
        },
        async editRemark(row, index) {
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/clipRemark",
                {
                    id: row.id,
                    remark: row.remark,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.tableData[index].remarkshow = false;
                this.getDataList(this.setpage);
            }
        },

        // 同步到素材库
        syncMaterial(row) {
            this.$confirm("请问是否同步到素材库", "同步素材库", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/demandhz/clipSyncMaterial",
                        {
                            sch_id: row.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false;
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false;
                        this.$message({
                            type: "success",
                            message: "同步成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 作废
        deletClipHz(row) {
            this.$confirm("请问是否要作废", "作废", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/demandhz/clipCancel",
                        {
                            id: row.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "作废成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
                query: {
                    day: JSON.stringify(this.yearData),
                },
            });
        },

        // 剪辑素材详情
        // toDetailsHz(id) {
        //     this.$router.push({
        //         path: "schedetailshz",
        //         query: {
        //             id: id,
        //         },
        //     });
        // },

        // 排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.getDataList(1);
        },

        // 关闭原需求
        tagClose() {
            this.queryInfo.is_all = 0;
            this.queryInfo.id = [];
            this.getDataList(1);
        },

        // 重置
        resetFun() {
            this.queryInfo.query = "";
            this.queryInfo.director_uid = [];
            this.queryInfo.closing_date = [];
            this.queryInfo.channel = [];
            this.queryInfo.brand_name = "";
            this.queryInfo.product_name = "";
            this.queryInfo.editor_uid = [];
            this.queryInfo.field = "closing_date";
            this.queryInfo.order = "";
            this.queryInfo.onlyme = 0;
            this.queryInfo.id = [];
            this.queryInfo.executor_uid = [];
            this.queryInfo.verify_status = [];
            this.queryInfo.fission_type = [];
            this.queryInfo.business_scene = [];
            this.executorQuery = "";
            this.directorQuery = "";
            this.executor_text = [];
            this.director_text = [];
            this.editor_text = [];
            this.data_text = [];
            this.fission_text = [];
            this.business_text = [];
            this.verify_text = [];
            this.channel_text = [];
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
            this.setSessionStorage();
        },

        setSessionStorage() {
            let info = {
                year: this.queryInfo.year,
                week: this.queryInfo.week,
                page: this.queryInfo.page,
                yearData: this.yearData,
            };
            window.sessionStorage.setItem(
                "schedulingClip",
                JSON.stringify(info)
            );
        },
    },
    components: {
        AddClipSingleHz,
        AddClipMultiHz,
        AddSourceClipHz,
        JustClipHz,
        FissionClipHz,
        FissionRecordClip,
        SceneModel,
        DaysModel,
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
</style>

<style>
.role_icon {
    transform: rotate(-90deg);
}
</style>

